<template>
    <div class="default-main ba-table-box">
        <el-alert class="ba-table-alert" v-if="baTable.table.remark" :title="baTable.table.remark" type="info"
            show-icon />

        <!-- 表格顶部菜单 -->
        <TableHeader :buttons="['refresh', 'edit', 'comSearch']"
            :quick-search-placeholder="t('quick Search Placeholder', { fields: t('oilOrder.quick Search Fields') })"
            @action="baTable.onTableHeaderAction">
            <el-button v-blur class="table-header-operate" type="success" @click="exports">
                <Icon color="#ffffff" name="el-icon-Download" />
                <span class="table-header-operate-text">导出</span>
            </el-button>
            <div class="tags">
                <el-tag class="ml-2" type="info">订单数{{ baTable.table.total }}单</el-tag>
                <el-tag class="ml-2" type="success">已支付{{ baTable.table.result && baTable.table.result.payCount || 0
                }}单</el-tag>
                <el-tag class="ml-2" type="success">已支付￥{{ baTable.table.result && baTable.table.result.payMoney || 0
                }}元</el-tag>
                <el-tag class="ml-2" type="danger">未支付{{ baTable.table.result && baTable.table.result.noPayCount || 0
                }}单</el-tag>
                <el-tag class="ml-2" type="danger">未支付￥{{ baTable.table.result && baTable.table.result.noPayMoney || 0
                }}元</el-tag>
                <el-tag class="ml-2" type="warning">已加油量{{ baTable.table.result && baTable.table.result.oil || 0
                }}L</el-tag>
            </div>
        </TableHeader>

        <!-- 表格 -->
        <!-- 要使用`el-table`组件原有的属性，直接加在Table标签上即可 -->
        <Table ref="tableRef" @action="baTable.onTableAction" />

        <!-- 表单 -->
        <PopupForm />
    </div>
</template>

<script setup lang="ts">
import { ref, provide, onMounted } from 'vue'
import baTableClass from '/@/utils/baTable'
import { oilOrder } from '/@/api/controllerUrls'
import { defaultOptButtons } from '/@/components/table'
import { baTableApi } from '/@/api/common'
import { useI18n } from 'vue-i18n'
import PopupForm from './popupForm.vue'
import Table from '/@/components/table/index.vue'
import TableHeader from '/@/components/table/header/index.vue'

const { t } = useI18n()
const tableRef = ref()
const optButtons = defaultOptButtons(["edit"])
const baTable = new baTableClass(
    new baTableApi(oilOrder),
    {
        pk: 'id',
        column: [
            { label: t('oilOrder.id'), prop: 'id', align: 'center', width: 70, sortable: 'custom', operator: 'RANGE' },
            { label: t('oilOrder.order_sn'), prop: 'order_sn', align: 'center', operator: 'LIKE', width: 220 },
            { label: '用户', prop: 'user.nickname', align: 'center', operator: 'LIKE' },
            { label: '加油站', prop: 'station.station_name', align: 'center', operator: 'LIKE', "min-width": 180 },
            { label: t('oilOrder.oil_type'), prop: 'oil_type', align: 'center', width: 100, operator: 'LIKE' },
            { label: t('oilOrder.oil_price'), prop: 'oil_price', align: 'center', width: 100, operator: 'RANGE' },
            { label: t('oilOrder.gun_number'), prop: 'gun_number', align: 'center', width: 100, operator: 'RANGE' },
            { label: t('oilOrder.total_price'), prop: 'total_price', align: 'center', width: 100, operator: 'RANGE' },
            { label: t('oilOrder.discount'), prop: 'discount', align: 'center', width: 100, operator: 'RANGE' },
            { label: '优惠券折扣', prop: 'coupon_price', align: 'center', width: 100, operator: 'RANGE' },
            { label: t('oilOrder.pay_price'), prop: 'pay_price', align: 'center', width: 100, operator: 'RANGE' },
            { label: '油量', prop: 'oil_format', align: 'center', width: 100, operator: 'RANGE' },
            { label: t('oilOrder.remark'), prop: 'remark', align: 'center', operator: 'LIKE' },
            { label: t('oilOrder.pay_time'), prop: 'pay_time', align: 'center', render: 'datetime', sortable: 'custom', operator: 'RANGE', width: 160 },
            { label: t('oilOrder.state'), prop: 'state', align: 'center', render: 'tag', replaceValue: { 0: '待支付', 1: '已支付', 2: '退款中', 3: '已退款' } },
            { label: t('oilOrder.createtime'), prop: 'createtime', align: 'center', render: 'datetime', sortable: 'custom', operator: 'RANGE', width: 160 },
            { label: t('oilOrder.updatetime'), prop: 'updatetime', align: 'center', render: 'datetime', sortable: 'custom', operator: 'RANGE', width: 160 },
            { label: t('operate'), align: 'center', width: 100, render: 'buttons', buttons: optButtons, operator: false },
        ],
        dblClickNotEditColumn: [undefined,],
        defaultOrder: { prop: 'id', order: 'desc' },
    },
    {
        defaultItems: { "oil_price": "0.00", "total_price": "0.00", "discount": "0.00", "pay_price": "0.00", "pay_time": "0", "state": "0" },
    }
)

provide('baTable', baTable)

onMounted(() => {
    baTable.table.ref = tableRef.value
    baTable.mount()
    baTable.getIndex()?.then((res) => {
        console.log(baTable.table)
        baTable.initSort()
        baTable.dragSort()
    })
})

const exports = () => {
    console.log(123)
    baTable.table.filter!.export = 1
    new baTableApi(oilOrder).index(baTable.table.filter).then((res) => {
        //要导出的json数据
        const jsonData = [];
        let type = { 0: '待支付', 1: '已支付', 2: '退款中', 3: '已退款' }
        for (let i in res.data.list) {
            let item = res.data.list[i];
            jsonData.push({
                id: item.id,
                order_sn: item.order_sn,
                user: item.user.nickname,
                station: item.station.station_name,
                oil_type: item.oil_type,
                oil_price: item.oil_price,
                gun_number: item.gun_number,
                total_price: item.total_price,
                discount: item.discount,
                coupon_price: item.coupon_price,
                pay_price: item.pay_price,
                oil: item.oil_format,
                remark: item.remark,
                pay_time: item.pay_time || '-',
                state: type[item.state],
                createtime: item.createtime,
                updatetime: item.updatetime,
            });
        }
        //列标题，逗号隔开，每一个逗号就是隔开一个单元格
        let str = `ID,订单编号,用户,加油站ID,加油类型,当前油价,加油枪号,总价,会员折扣,优惠券折扣,支付金额,油量,备注,支付时间,状态,创建时间,更新时间\n`;
        //增加\t为了不让表格显示科学计数法或者其他格式
        for (let i = 0; i < jsonData.length; i++) {
            for (let item in jsonData[i]) {
                str += `${jsonData[i][item] + "\t"},`;
            }
            str += "\n";
        }
        //encodeURIComponent解决中文乱码
        let uri =
            "data:text/csv;charset=utf-8,\ufeff" + encodeURIComponent(str);
        //通过创建a标签实现
        let link = document.createElement("a");
        link.href = uri;
        //对下载的文件命名
        link.download = "加油订单导出.csv";
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
    }).catch(err => {
        baTable.table.filter!.export = 0
    })
}
</script>

<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
    name: 'oilOrder',
})
</script>

<style scoped lang="scss">
.tags {
    margin: 0 10px;

    .ml-2 {
        margin-right: 10px;
    }
}
</style>
